<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品排序</title>
    <style>
            ul , ol {
                list-style: none;
                padding: 0;
                margin: 0;
                float: left;
                margin-left: 50px;
            }
        
            ul li {
                width: 160px;
                height: 40px;
                border: 1px solid #ccc; 
                text-align: center;
                line-height: 40px;
                cursor: pointer;
            }
           ol {
               width: 600px;
               height: 1000px;
               background-color: #f0f0f0;
           }
           ol li {
               width: 598px;
               height: 100px;
               border: 1px solid gray;
           }
           ol li div {
               height: 40px;
           }
    </style>
</head>
<body>

    <ul>
        <li><span>单价最高</span></li>
        <li><span>单价最低</span></li>
        <li><span>销量最高</span></li>
        <li><span>信用最高</span></li>
    </ul>

    <ol>
        <!-- <li>
                <div>名称</div>
                <div>价格</div>
                <div>销量</div>
            </li> -->
    </ol>

    <script>
        // 要求：
            // 商品排序

        // 思考：
            // data数据如何渲染页面上
            // 数组嵌套对象，找每个对象相同的属性
            // 遇到数组，首先想到索引值（下标） 想到循环
            // 字符串拼接 
            // 不能使用appendChild()  可以使用innerHTML

        // 商品数据
        var data = [
                {
                    "price":199,
                    "sales":10000,
                    "honesty":2,
                    "desc":"大白菜"
                },
                {
                    "price":599,
                    "sales":9999,
                    "honesty":5,
                    "desc":"大西瓜"
                },
                {
                    "price":399,
                    "sales":6666,
                    "honesty":9,
                    "desc":"大番薯"
                }
            ]

        
        // 编码代码
            //1. 获取页面相关的标签
            var items = document.querySelectorAll("ul li");
            var olElement = document.querySelector("ol") ;

            // 2. 编写函数 渲染data数据
            var template = function(arr){
                // 字符串
                var str = '';
                // 循环数组
                for(var i = 0 ; i < arr.length ; i ++){
                    // 拼接字符串
                    str += '<li>'
                    str += '    <div>名称: '+arr[i].desc+' </div>'
                    str += '    <div>价格: '+arr[i].price+'￥</div>'
                    str += '    <div>销量: '+arr[i].sales+' 信用: '+arr[i].honesty+'</div>'
                    str += '</li>'
                }
                // 渲染拼接好的字符串
                olElement.innerHTML = str;
            }
          
            // 3. 编写函数 切换选项的背景高亮
            var setHighLight = function(index){
                // 循环标签数组 
                for(var i = 0 ; i < items.length ; i ++){
                    // 把所有的ul>li标签背景设置为白色
                    items[i].style["backgroundColor"] = "#fff";
                }
                // 把索引值对应的ul>li标签背景设置为灰色
                items[index].style["backgroundColor"] = "#ccc";
            }
            // 测试
            // setHighLight(0);

            // 4. 对数组进行排序
            // 方式1：用双重for循环排序
            // 方式2：用数组提供的sort方法（别人已经封装完善的）
            var addEvent = function(){
                // 循环li标签数组
                for(var i = 0 ; i < items.length ; i ++){
                    // 属性绑定
                    items[i].aaa = (i + 1);
                    // 事件绑定
                    items[i].onclick = function(){
                        // 判断点击的标签属于
                        var aaa = this.aaa;
                        // console.log(aaa);
                        // 对数组进行排序
                        if(aaa == 1){
                            mySort("price");
                        }else if(aaa == 2){
                            data.sort(function(prev,next){
                                return prev.price - next.price;
                            })
                        }else if(aaa == 3){
                            mySort("sales");
                        }else if(aaa == 4){
                            mySort("honesty");
                        }
                        //  判断语句结束 渲染数据
                        template(data);
                        // 切换选项
                        setHighLight(aaa-1);
                    }
                }
            }

            // 封装函数 重复使用sort方法
            function mySort(key){
                data.sort(function(prev,next){
                    return next[key] - prev[key];
                })
                return data;
            }

            // 5. 初始化页面
            template(data);
            // 调用addEvent函数
            addEvent();


</script>
    
</body>
</html>